<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>去哪儿网账号登陆注册</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <!--    1.集成主JS-->
    <script type="text/javascript" src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/lar.css">
</head>

<body>
<div id="app">
    <div class="shell">
        <div class="container a-container" id="a-container">
            <form action="" method="" class="form" id="a-form">
                <h2 class="form_title title">创建账号</h2>
                <div class="form_icons">
                    <i class="bi bi-tencent-qq"></i>
                    <i class="bi bi-wechat"></i>
                </div>
                <span class="form_span">选择注册方式或电子邮箱注册</span>
                <input v-model="phone" type="text" class="form_input" placeholder="您的手机号码">
                <div class="sp sp1" style="width: 350px;">
                    <input v-model="vcode" type="text" class="form_input" placeholder="请输入验证码">
                    <span><span @click="getVerifyCode">获取验证码</span></span>
                </div>
                <div class="sp sp2" style="width: 350px;">
                    <input :type="pwdType" v-model="pwd" class="form_input" placeholder="6-20位的两种不同字符的组合">
                    <span @click="changeIcon"><i :class="iconClass" style="font-size: 25px;"></i></span>
                </div>
                <button @click.prevent="register" class="form_button button submit">立即注册</button>
            </form>
        </div>

        <div class="container b-container" id="b-container">
            <form action="" method="" class="form" id="b-form">
                <h2 class="form_title title">登入账号</h2>
                <div class="form_icons">
                    <i class="bi bi-tencent-qq"></i>
                    <i class="bi bi-wechat"></i>
                </div>
                <span class="form_span">选择登录方式或电子邮箱登录</span>
                <input type="text" v-model="account" class="form_input" placeholder="您的邮箱/手机号/账号">
                <input type="password" v-model="pwd" class="form_input" placeholder="密码">
                <div id="captcha-element"></div>  <!--预留的验证码页面元素，用于配置初始化函数中的element参数-->
                <a class="form_link">忘记密码？</a>
                <button @click.prevent="login" class="form_button button submit" id="login">立即登录</button>
            </form>
        </div>

        <div class="switch" id="switch-cnt">
            <div class="switch_circle"></div>
            <div class="switch_circle switch_circle-t"></div>
            <div class="switch_container" id="switch-c1">
                <h2 class="switch_title title" style="letter-spacing: 0;">Welcome Back！</h2>
                <p class="switch_description description">已经有账号了嘛，去登入账号来进入奇妙世界吧！！！</p>
                <button class="switch_button button switch-btn">立即登录</button>
            </div>

            <div class="switch_container is-hidden" id="switch-c2">
                <h2 class="switch_title title" style="letter-spacing: 0;">Hello Friend！</h2>
                <p class="switch_description description">去注册一个账号，成为尊贵的会员，让我们踏入奇妙的旅途！</p>
                <button class="switch_button button switch-btn">立即注册</button>
            </div>
        </div>
    </div>
</div>

<script>
    var v = new Vue({
        el: "#app",
        data: {
            iconClass: 'bi bi-eye-slash',
            pwdType: 'password',
            account: '',
            pwd: '',
            phone: '',
            vcode:'',
        },
        created() {
        },
        methods: {
            changeIcon() {
                this.iconClass = (this.iconClass === 'bi bi-eye-slash') ? 'bi bi-eye' : 'bi bi-eye-slash';
                this.pwdType = (this.pwdType === 'password') ? 'text' : 'password';
            },

            login() {
                if (this.account == '' || this.pwd == '') {
                    this.$message("账号密码不能为空！");
                    return;
                }
            },

            getVerifyCode(){
                if (!this.phone.match("^1[3-9]\\d{9}$")){
                    this.$message({
                        showClose: true,
                        message: '手机号格式错误',
                        type: 'error'
                    });
                    return
                }

                axios.get("/users/register/code?phone="+this.phone).then( res => {
                    if (res.data.code === 200){
                        v.$message({
                            message: res.data.message,
                            type: 'success'
                        })
                    }
                })
            },

            register(){
                if (this.phone === '' || this.vcode === '' || this.pwd === ''){
                    this.$message({
                        message: "必填项不能为为空",
                        type: 'warning'
                    })
                    return
                }


                let regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$|^(?=.*[A-Za-z])(?=.*[@$!%*?&])[A-Za-z@$!%*?&]{6,20}$|^(?=.*\d)(?=.*[@$!%*?&])[\d@$!%*?&]{6,20}$/;

                if (!this.pwd.match(regex)){
                    this.$message('密码格式错误');
                    return
                }

                const md5Pwd = md5(this.pwd);

                axios.post("/users/register/register",{phone:this.phone,code:this.vcode,pwd:md5Pwd}).then( res =>{
                    if (res.data.code == 200){
                        v.$message({
                            message: res.data.message,
                            type:'success'
                        }), //转到登录账号  模拟switchBtn click事件进行切换
                        v.account = v.phone;
                        switchBtn[0].click();
                    }else {
                        v.$message.error(res.data.message)
                    }
                })

            }

        }
    })


    let switchCtn = document.querySelector("#switch-cnt");
    let switchC1 = document.querySelector("#switch-c1");
    let switchC2 = document.querySelector("#switch-c2");
    let switchCircle = document.querySelectorAll(".switch_circle");
    let switchBtn = document.querySelectorAll(".switch-btn");
    let aContainer = document.querySelector("#a-container");
    let bContainer = document.querySelector("#b-container");
    let allButtons = document.querySelectorAll(".submit");

    let getButtons = (e) => e.preventDefault()
    let changeForm = (e) => {
        // 修改类名
        switchCtn.classList.add("is-gx");
        setTimeout(function () {
            switchCtn.classList.remove("is-gx");
        }, 1500)
        switchCtn.classList.toggle("is-txr");
        switchCircle[0].classList.toggle("is-txr");
        switchCircle[1].classList.toggle("is-txr");

        switchC1.classList.toggle("is-hidden");
        switchC2.classList.toggle("is-hidden");
        aContainer.classList.toggle("is-txl");
        bContainer.classList.toggle("is-txl");
        bContainer.classList.toggle("is-z");
    }
    // 点击切换
    let shell = (e) => {
        for (var i = 0; i < allButtons.length; i++)
            allButtons[i].addEventListener("click", getButtons);
        for (var i = 0; i < switchBtn.length; i++)
            switchBtn[i].addEventListener("click", changeForm)
    }
    window.addEventListener("load", shell);


    let captcha;
    var verifycode;
    var verifymessage;

    // 弹出式
    initAliyunCaptcha({
        SceneId: '1g30ua16', // 场景ID。根据步骤二新建验证场景后，您可以在验证码场景列表，获取该场景的场景ID
        prefix: '1lrj52', // 身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片区域，获取身份标
        mode: 'popup', // 验证码模式。popup表示要集成的验证码模式为弹出式。无需修改
        element: '#captcha-element', //页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。
        button: '#login',
        captchaVerifyCallback: captchaVerifyCallback, // 业务请求(带验证码校验)回调函数，无需修改
        onBizResultCallback: onBizResultCallback, // 业务请求结果回调函数，无需修改
        getInstance: getInstance, // 绑定验证码实例函数，无需修改
        slideStyle: {
            width: 360,
            height: 40,
        }, // 滑块验证码样式，支持自定义宽度和高度，单位为px。其中，width最小值为320 px
        language: 'cn', // 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en）
        region: 'cn' //验证码示例所属地区，支持中国内地（cn）、新加坡（sgp）
    });

    // 绑定验证码实例函数。该函数为固定写法，无需修改
    function getInstance(instance) {
        captcha = instance;
    }


    // 业务请求(带验证码校验)回调函数
    /**
     * @name captchaVerifyCallback
     * @function
     * 请求参数：由验证码脚本回调的验证参数，不需要做任何处理，直接传给服务端即可
     * @params {string} captchaVerifyParam
     * 返回参数：字段名固定，captchaResult为必选；如无业务验证场景时，bizResult为可选
     * @returns {{captchaResult: boolean, bizResult?: boolean|undefined}}
     */
    async function captchaVerifyCallback(captchaVerifyParam) {
        const hashPwd = md5(v.pwd);

        // 1.向后端发起业务请求，获取验证码验证结果和业务结果
        const res = await axios.post('/users/login', {
            captchaVerifyParam: captchaVerifyParam, // 验证码参数
            account: v.account,
            pwd: hashPwd
        });

        const result = res.data;
        const token = result.data;

        localStorage.setItem("token",token);

        // 2.构造标准返回参数
        const verifyResult = {
            captchaResult: result.flag, // 验证码验证是否通过，boolean类型，必选
            bizResult: true, // 业务验证是否通过，boolean类型，可选；若为无业务验证结果的场景，bizResult可以为空
            verifyCode: result.code,
            verifyMessage: result.message
        };

        varifycode = verifyResult.verifyCode;
        varifymessage = verifyResult.verifyMessage;

        return verifyResult;
    }


    // 业务请求验证结果回调函数
    function onBizResultCallback(bizResult) {
        if (bizResult === true){
            if (varifycode === 200) {
                v.$message({
                    message: varifymessage,
                    type: 'success'
                });
                location.href = "index.html";
            } else if (varifycode === 500) {
                v.account = '';
                v.pwd = '';
                v.$message.error(varifymessage);
            } else {
                v.account = '';
                v.pwd = '';
                v.$message({
                    message: varifymessage,
                    type: 'warning'
                });
                //转到注册账号  模拟switchBtn click事件进行切换
                switchBtn[1].click();
            }

        }


    }


</script>
</body>

</html>